<template>
  <div class="newRelease">
    <!-- 头部 -->
   <InsideHeader :bannerType="bannerType"></InsideHeader>

    <!-- 面包屑 -->
    <!-- <crumb :titleOne="'最新资讯'" :titleTwo="'新品发布'" :history="-1"></crumb> -->
    <div class="crumb">
                <div class="block">  
                    <div class="crumbL">
                        <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                        <em>></em>
                        <nuxt-link :to="{name: 'news-newsIndex'}">最新资讯</nuxt-link>
                        <em>></em>
                        <nuxt-link :to="{name: 'news-newProduct'}" class="on">新品发布</nuxt-link>
                        <div class="clear"></div>
                    </div>
                    <!-- <div class="crumbR">
                        <nuxt-link :to="{name: 'news-newsCompany'}">公司新闻</nuxt-link>
                        <nuxt-link :to="{name: 'news-newProduct'}">新品发布</nuxt-link>
                        <nuxt-link :to="{name: 'news-logUpdate'}">资料更新日志</nuxt-link>
                        <div class="clear"></div>
                    </div> -->
                    <div class="clear"></div>
                </div>
            </div>

    <div class="block">
      <div class="content">
        <div class="title">
          <span>新品发布</span>
        </div>
        <div class="item" ref="scrollList">
          <ul>
            <li v-for="(item,index) in productlist" :key="index">
              <div class="left">
                <p>全部</p>
                <div class="circle">
                  <div class="circle1"></div>
                </div>
                <div class="wire"></div>
              </div>
              <div class="right">
                <ul>
                  <li>
                    <nuxt-link :to="{name: 'news-newsDetails',query:{id:item.oid}}">
                      <img :src="item.mainPhoto" />
                      <div class="hint">
                        <p>{{item.title}}</p>
                        <span>{{item.createTime}}</span>
                      </div>
                    </nuxt-link>
                    <div class="clear"></div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 链接 -->
    <Insidelink></Insidelink>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/news.css";
import InsideHeader from "@/components/head";
import HomeHooter from "@/components/footer";
import crumb from "@/components/crumb";
import Insidelink from "@/components/link";
export default {
  name: "newProduct",
  components: {
    InsideHeader,
    HomeHooter,
    crumb,
    Insidelink
  },
  data() {
    return {
      bannerType:'news',
      list: [
        {
          timeline: "全部",
          item: [
            {
              img: require("../../static/newsImg/2.jpg"),
              content: "新一代伺服驱动系统MELSERVO-J5发布",
              time: "2019.01.10"
            },
            {
              img: require("../../static/newsImg/3.jpg"),
              content: "iQ-F Reborn！再出发，成为客户的理想机...",
              time: "2019.01.10"
            },
            {
              img: require("../../static/newsImg/4.jpg"),
              content: "新品推介| 方圆之间的平衡—LX7-FN17系...",
              time: "2019.01.10"
            }
          ]
        },
        {
          timeline: "2019.01",
          item: [
            {
              img: require("../../static/newsImg/5.jpg"),
              content: "FREQROL-CS80系列-凝缩多样化功能...",
              time: "2019.01.08"
            },
            {
              img: require("../../static/newsImg/6.jpg"),
              content: "“精通多国语言会话”的宽屏人机界面产...",
              time: "2019.01.07"
            },
            {
              img: require("../../static/newsImg/7.jpg"),
              content: "“精通多国语言会话”的宽屏人机界面产...",
              time: "2019.01.06"
            }
          ]
        },
        {
          timeline: "2019.02",
          item: [
            {
              img: require("../../static/newsImg/8.jpg"),
              content: "可对应CC-Link IE Field Basic的伺服放... MR-JE-C系列",
              time: "2019.01.05"
            },
            {
              img: require("../../static/newsImg/9.jpg"),
              content: "光纤激光加工机ML3015SR-F系列隆重推...",
              time: "2019.01.04"
            },
            {
              img: require("../../static/newsImg/10.jpg"),
              content: "尖端的革新！三菱电机最新激光打孔机GT...",
              time: "2019.01.03"
            }
          ]
        },
        {
          timeline: "全部",
          item: [
            {
              img: require("../../static/newsImg/11.jpg"),
              content: "新一代MS-T系列电磁接触器/热过载继电...",
              time: "2019.01.02"
            },
            {
              img: require("../../static/newsImg/12.jpg"),
              content: "三菱电机光纤激光加工机ML3015eX-F40",
              time: "2019.01.01"
            },
            {
              img: require("../../static/newsImg/13.jpg"),
              content: "紧凑、轻量、高性能四轴机器人CH系列...",
              time: "2019.01.10"
            }
          ]
        }
      ],
      productlist: [], //新品发布
      isKaiGuan: true,
      page: 1
    };
  },
  mounted() {
    if (this.$route.path == "/news/newProduct") {
      this.$refs.scrollList.addEventListener("scroll", this.menu);
    } else {
      window.addEventListener("scroll", "");
    }
  },
  methods: {
    //新品发布
    productList() {
      let id = this.$axios,
        params = {
          page: this.page,
          type: 1,
          limit: 10,
          title: ""
        };
      this.$api.homeindex.newlist(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          if (result.data.data.length < 8) {
            this.isKaiGuan = false;
          } else {
            this.isKaiGuan = true;
          }

          if (this.page != 1) {
            this.productlist = this.productlist.concat(result.data.data);
          } else {
            this.productlist = result.data.data;
          }
        }
      });
    },

    menu() {
      if (this.isKaiGuan) {
        let scroll =
          this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
        console.log(scroll, "scroll");
        if (scroll === 0) {
          this.page++;
          this.productList();
        }
      }
    },
    //滚动条在Y轴上的滚动距离
    getScrollTop() {
      var documentScrollTop = 0;
      documentScrollTop = this.$refs.scrollList.scrollTop;
      return documentScrollTop;
    },
    //文档的总高度
    getScrollHeight() {
      var documentScrollHeight = 0;
      documentScrollHeight = this.$refs.scrollList.scrollHeight;
      return documentScrollHeight;
    },
    //浏览器视口的高度
    getWindowHeight() {
      var windowHeight = 0;
      windowHeight = this.$refs.scrollList.clientHeight;
      return windowHeight;
    }
  },
  created() {
    //新品发布
    this.productList();
  }
};
</script>

<style scoped>
.item {
  height: 450px;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
